<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
          <h4 class="type-title">
            <div class="icon-box"><icon-svg name="iconBase"></icon-svg></div>
            <span>基本信息</span>
          </h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="上级公司" prop="parentCompId">
                <tag-tree-selection
                  title="上级公司"
                  :data="treeList"
                  :treeProps="treeProps"
                  :initId="editForm.parentCompId"
                  :editable="editable"
                  @confirm="id => (editForm.parentCompId = id)"
                ></tag-tree-selection>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司名称" prop="compNm">
                <el-input placeholder="请输入公司名称" :readonly="!editable" v-model="editForm.compNm"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="公司全称" prop="compFname">
                <el-input placeholder="请输入公司全称" :readonly="!editable" v-model="editForm.compFname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司类型" prop="compType">
                <el-select placeholder="请选择公司类型" v-model="editForm.compType" :disabled="!editable">
                  <el-option
                    v-for="dict in $dictList('auth_comp_type')"
                    :key="dict.key"
                    :label="dict.value"
                    :value="dict.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="组织代码" prop="compOrgCode">
                <el-input
                  placeholder="请输入公司组织代码"
                  :readonly="!editable"
                  v-model="editForm.compOrgCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织层级" prop="compOrgLevel">
                <el-input
                  placeholder="请输入公司组织层级"
                  :readonly="!editable"
                  v-model="editForm.compOrgLevel"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注信息" prop="cmntStr">
                <el-input
                  type="textarea"
                  placeholder="请输入备注信息，最大不能超过100个字符"
                  v-model="editForm.cmntStr"
                  :readonly="!editable"
                  :rows="3"
                  resize="none"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import tagTreeSelection from '@/components/tag-tree-selection'
export default {
  props: {
    treeList: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  components: {
    tagTreeSelection
  },
  data() {
    let checkCode = (rule, value, callback) => {
      if (value) {
        if (!/^[0-9a-zA-Z]+$/.test(value)) callback(new Error('公司组织代码只能输入英文或数字'))
        else callback()
      } else callback()
    }
    let checkNum = (rule, value, callback) => {
      if (value) {
        if (value.toString().indexOf('.') >= 0 || isNaN(Number(value)) || Number(value) < 0)
          callback(new Error('公司组织层级只能是大于0的整数'))
        else callback()
      } else callback()
    }
    return {
      editable: true,
      drawerVisible: false,
      drawerType: 'add',
      drawerTitle: {
        add: '新增',
        edit: '编辑'
      },
      compId: '',
      compStatus: '',
      editForm: {
        parentCompId: '',
        compNm: '',
        compFname: '',
        compType: '',
        cmntStr: '',
        compOrgCode: '',
        compOrgLevel: ''
      },
      editFormRules: {
        compNm: [
          { required: true, message: '公司名称不能为空', trigger: 'blur' },
          { max: 50, message: '公司名称不能超过50个字符', trigger: 'blur' }
        ],
        compFname: [
          { required: true, message: '公司全称不能为空', trigger: 'blur' },
          { max: 50, message: '公司全称不能超过50个字符', trigger: 'blur' }
        ],
        compType: [{ required: true, message: '公司类型不能为空', trigger: 'change' }],
        cmntStr: [{ max: 100, message: '备注信息不能超过100个字符', trigger: 'blur' }],
        compOrgCode: [
          { max: 16, message: '公司组织代码不能超过100个字符', trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }
        ],
        compOrgLevel: [{ validator: checkNum, trigger: 'blur' }]
      },
      treeProps: {
        title: '上级公司',
        children: '_children',
        label: 'compNm',
        id: 'compId'
      }
    }
  },
  methods: {
    showDrawer(type, data) {
      this.drawerType = type
      switch (type) {
        case 'add':
          if (data.compId) this.editForm.parentCompId = data.compId
          this.drawerVisible = true
          break
        case 'edit':
          this.editable = true
          this.getCompanyDetail(data)
          break
      }
    },
    getCompanyDetail(scope) {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authCompMgr/' + scope.compId),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.compId = data.data.compId || ''
          this.compStatus = data.data.compStatus
          this.editForm.parentCompId = data.data.parentCompId || ''
          this.editForm.compNm = data.data.compNm || ''
          this.editForm.compFname = data.data.compFname || ''
          this.editForm.compType = data.data.compType
          this.editForm.cmntStr = data.data.cmntStr || ''
          this.editForm.compOrgCode = data.data.compOrgCode || ''
          this.editForm.compOrgLevel = data.data.compOrgLevel === -1 ? '' : data.data.compOrgLevel
          this.drawerVisible = true
        } else {
          this.$message('获取公司信息失败！')
        }
      })
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = {
            parentCompId: this.editForm.parentCompId,
            compNm: this.editForm.compNm,
            compFname: this.editForm.compFname,
            compType: this.editForm.compType,
            compOrgCode: this.editForm.compOrgCode,
            compOrgLevel: this.editForm.compOrgLevel === '' ? -1 : this.editForm.compOrgLevel,
            cmntStr: this.editForm.cmntStr
          }
          if (this.drawerType === 'edit')
            params = Object.assign({}, params, { compId: this.compId, compStatus: this.compStatus })
          this.$ajax({
            url: this.$ajax.setUrl('auth/authCompMgr'),
            method: this.drawerType === 'add' ? 'post' : 'put',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.clearDialog()
              this.$emit('refresh')
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    clearDialog() {
      this.compId = ''
      this.compStatus = ''
      this.editForm.parentCompId = ''
      this.editForm.compNm = ''
      this.editForm.compFname = ''
      this.editForm.compType = ''
      this.editForm.compOrgCode = ''
      this.editForm.compOrgLevel = ''
      this.editForm.cmntStr = ''
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
      this.drawerType = 'add'
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="scss"></style>
